<template>
  <div class="three">
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    <div class="map" id="map"></div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import 'ol/ol.css';
import MVT from 'ol/format/MVT';
import Map from 'ol/Map';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import View from 'ol/View';
import { Fill, Icon, Stroke, Style, Text } from 'ol/style';
import { get as getProjection } from 'ol/proj';
import createMapboxStreetsV6Style from '@/plugins/createMapBoxStreetsV6Style';
@Component({
  components: {},
})
export default class threeBirdMap extends Vue {
  // mapbox Key
  // pk.eyJ1IjoibXJkb3R5YW4iLCJhIjoiY2tnN2F5cG5xMDVtazJ4cGt5ZGR0bWxhOSJ9.z9Um5t6HaQ-v4BqViU2Jfg
  private mapKey: string =
    'pk.eyJ1IjoibXJkb3R5YW4iLCJhIjoiY2tnN2F5cG5xMDVtazJ4cGt5ZGR0bWxhOSJ9.z9Um5t6HaQ-v4BqViU2Jfg';
  private map: any = null;
  private resolutions: any = [];
  public mounted() {
    //TODO:
    this.resolutions = [];
    for (let i = 0; i <= 8; ++i) {
      this.resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
    }

    this.createMap();
  }
  public tileUrlFunction(tileCoord: any) {
    return (
      'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
      '{z}/{x}/{y}.vector.pbf?access_token=' +
      this.mapKey
    )
      .replace('{z}', String(tileCoord[0] * 2 - 1))
      .replace('{x}', String(tileCoord[1]))
      .replace('{y}', String(tileCoord[2]))
      .replace('{a-d}', 'abcd'.substr(((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
  }
  public createMap() {
    this.map = new Map({
      layers: [
        new VectorTileLayer({
          source: new VectorTileSource({
            attributions:
              '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
              '© <a href="https://www.openstreetmap.org/copyright">' +
              'OpenStreetMap contributors</a>',
            format: new MVT(),
            tileGrid: new TileGrid({
              extent: getProjection('EPSG:3857').getExtent(),
              resolutions: this.resolutions,
              tileSize: 512,
            }),
            tileUrlFunction: this.tileUrlFunction,
          }),
          style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
        }),
      ],
      target: 'map',
      view: new View({
        center: [0, 0],
        minZoom: 1,
        zoom: 2,
      }),
    });
  }
}
</script>

<style lang="less" scoped>
.map {
  height: calc(100vh - 274px);
  width: 100%;
}
</style>

